<template>
<a 
	class="bh-link" 
	:class="[
		type ? 'bh-link-' + type : '',
		underline && !disabled && 'is-underline',
		disabled && 'is-disabled',
    ]"
    :href="disabled ? null : href">
    <i :class="icon" v-if="icon"></i>
	<span v-if="$slots.default" class="bh-link-inner">
		<slot />
	</span>
	<template v-if="$slots.icon"><slot v-if="$slots.icon" name="icon"></slot></template>
</a>
</template>

<script>
export default {
	name: 'bh-link',
	props: {
		type: {
			type: String,
			default: 'default'
		},
		underline: {
			type: Boolean,
			default: true
		},
		href: String,
		disabled: Boolean,
		icon: String,
	}
}
</script>
